<template>
  <div class="upload">
    <mu-dialog 
      width="492" 
      :open.sync="uploadFile"  
      dialog-class="upload-dialog" 
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      :overlay-close="false"
    >
      <div class="upload-dialog-header">
        <div class="title">确认上传新文件</div>
        <img class="fork" src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG" @click="changeUploadFile">
      </div>
      <div class="upload-dialog-tips">
        您只能上传 1 个文件。已上传的文件   “<strong>学习活动方案.pdf</strong>” 将会丢失，是否继续？
      </div>
      <div class="upload-dialog-footer">
        <mu-button
          class="upload-dialog-cancel"
          color="#ffffff"
          round
          @click="changeUploadFile"
        >
          取消
        </mu-button>
        <mu-button
          class="upload-dialog-next"
          color="#FF7632"
          round
          @click="changeFile"
        >
          上传新文件
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadFile: false,
    }
  },
  methods: {
    changeUploadFile() {
      this.uploadFile = !this.uploadFile;
    },
    changeFile() {

    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .upload-dialog {
  border-radius: 18px;

  .mu-dialog-body {
    padding: 30px;
  }

  .upload-dialog-header {
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;

    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .fork {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }
  .upload-dialog-tips {
    color: #333333;
  }


  .upload-dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
  }
  .upload-dialog-next {
    width: 120px;
    height: 30px;
    font-size: 12px;
    margin-left: 21px;
    box-shadow: none;
  }
  .upload-dialog-cancel {
    width: 120px;
    height: 30px ;
    font-size: 12px;
    color: #666666;
    border: 1px solid #666666;
    box-shadow: none;
  }
  .hover::before {
    display: none;
  }
}



</style>